//
//  BrandView.swift
//  shop
//
//  Created by chen on 2025/5/18.
//

import SwiftUI

struct BrandView: View {
    
    @StateObject private var vm: BrandViewModel = BrandViewModel()
    
    @EnvironmentObject private var router: Router
    
    @State private var selectedTab: Int = 6
    
    var body: some View {
        ZStack{
            LinearGradient(
                gradient: Gradient(colors: [
                    Color.brandBg, Color.brandBgEnd,
                ]),
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()
            
            VStack(spacing: 0){
                Image("brandImg")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .ignoresSafeArea(edges: .top)
                
                // Tab 选项卡
                ScrollViewReader { proxy in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 25) {
                            ForEach(vm.brandType, id: \.type) { item in
                                Text("\(item.name)")
                                    .font(.system(size: 16))
                                    .foregroundColor(selectedTab == item.type ? .white : .white.opacity(0.6))
                                    .frame(height: 40)
                                    .id(item.type)
                                    .onTapGesture {
                                        withAnimation {
                                            selectedTab = item.type
                                            proxy.scrollTo(item.type, anchor: .center)
                                        }
                                    }
                            }
                        }
                        .padding(.horizontal)
                    }
                    .onChange(of: selectedTab) { newValue in
                        withAnimation {
                            proxy.scrollTo(newValue, anchor: .center)
                        }
                    }
                }
                
                // Tab 内容区域
                TabView(selection: $selectedTab) {
                    ForEach(vm.brandType, id: \.type) { item in
                        ScrollView(showsIndicators: false){
                            LazyVStack{
                                if let list = vm.brandMap[item.type], !list.isEmpty {
                                    ForEach(list, id: \.brandId) { brand in
                                        BrandList(brand: brand, router: router)
                                    }
                                } else {
                                    if let loading = vm.loadMap[item.type], !loading {
                                        Text("\(item.name)暂无数据...")
                                            .font(.system(size: 15))
                                            .foregroundStyle(Color.white)
                                    }
                                }
                            }
                            .padding(.bottom, 8)
                            .onAppear{
                                vm.getBrandMap(type: item.type)
                            }
                            
                            if let loading = vm.loadMap[item.type], loading {
                                ProgressView()
                                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                            }
                        }
                        .tag(item.type)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            }
            .ignoresSafeArea(edges: .top)
        }
        .navigationBarBackButtonHidden(true)
    }
}

#Preview {
    BrandView()
        .environmentObject(Router.shared)
}
